<template>
	<div class="ui-input" :style="style"  :class="[classname,size,disabledClass]">
		<input type="text" :placeholder="placeholder" v-model="value" ref="inArea" class="ui-input-text"
		@click="click" @mouseover="mouseover" @change="change" :disabled="disabled" :readonly="isread"  :name="name"/>
		<i class="ui-input-icon font" v-if="isshowicon" @click="click" v-html="typeStr"></i>
		<slot></slot>
		
		<ui-date v-if="type=='date'" @change="changeDate" :classname="['ui-input-date',isshowDate?'show':'']" :data="value"></ui-date>

	</div>
</template>

<script>
	import dateBox from './ui_date.vue';
	/*
		组件属性[
			value:默认值
			style:自定义样式
			class:自定义class
			name:表单name
			disabled：是否交互 true/false
			readonly:是否只读 true/false
			size:按钮尺寸 big,normal(默认),small,mini
			placeholder:默认提示
			type:输入框类型 text(默认)，date时间，search搜索,number数字
			min:最小值
			max:最大值
			rules:用于表单验证
				[
					empty:[true/false,"提示信息"],
					int:[true/false,"提示信息"],
					min:[200,"提示信息"],
					...
				]

		]
		组件事件[
			click:选项发生改变时回调的父组件方法，callback(obj[当前实例])
		]
	*/
	export default{
		props:{
			"value":{type:null,default:""},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
            'name':{type:null,default:""},
			'size':{type:String,default:'normal'},
			'disabled':{type:Boolean,default:false},
			'readonly':{type:Boolean,default:false},
			'placeholder':{type:String,default:""},
			'type':{type:String,default:""},
			'min':{type:Number,default:null},
			'max':{type:Number,default:null},
			'rules':{type:Array,default:[]}
		},
		data(){
			return {
				uiType:"ui-btn",
				disabledClass:this.disabled?"disabled":"",
				isshowDate:false,
				isshowicon:false,
				typeStr:"",
                isshow:false
			}
		},
		computed:{
			isread(){
				if(this.readonly || this.type=="date"){
					return 'readonly';
				}
				return false;
			}
		},
		methods:{			
			click(event){
				if(!this.disabled){
					if(this.type=="date"){
						this.$emit('click',this,event);
						if(this.type=="date"){
							this.isshowDate=!this.isshowDate;
						}	
					}
				}
			},
			mouseover(event){
				if(!this.disabled)this.$emit('mouseover',this,event);
			},
			change(event){
				if(!this.disabled){

					if(this.type=="number"){
                        let tmp=parseFloat(this.value);
                        if(!isNaN(tmp)){
							if(this.min!=null && tmp<this.min){
								this.value=this.min;
							}else if(this.max!=null && tmp>this.max){
								this.value=this.max;
							}else{
								this.value=tmp;
							}
						}else{
							this.value=this.min!=null?this.min:(this.max!=null?this.max:1);
						}
					}
					this.$emit('change',this);
				}
			},
			submit(event){
				if(!this.disabled)this.$emit('submit',this,this.$refs.inArea);
			},
			changeDate(data){
				this.value=data.date;
				this.isshowDate=false;
			}
		},
		components:{
			"ui-date":dateBox
		},
		created(){
			if(this.type=="date"){
				this.isshowicon=true;
				this.typeStr="&#xe67a";
			}else if(this.type=="search"){
				this.isshowicon=true;
				this.typeStr="&#xe651;";
			}else if(this.type=="number"){
				this.value=1;
				this.isshowicon=false;
				this.typeStr="";
			}else{
				this.typeStr="";
			}
		}
	}
</script>
